<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI分析</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }

        .layui-card {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .analysis-step {
            margin-bottom: 30px;
        }

        .result-card {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="layui-container">
        <div class="layui-card">
            <div class="layui-card-header">AI分析</div>
            <div class="layui-card-body">
                <!-- 分析参数设置 -->
                <div class="analysis-step">
                    <fieldset class="layui-elem-field">
                        <legend>分析参数设置</legend>
                        <div class="layui-field-box">
                            <form class="layui-form">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择路口</label>
                                    <div class="layui-input-block">
                                        <select name="intersection" lay-verify="required">
                                            <option value=""></option>
                                            <option value="0">解放路与中山路交叉口</option>
                                            <option value="1">人民路与建设路交叉口</option>
                                            <option value="2">朝阳路与光明路交叉口</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">分析时段</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="period" value="0" title="早高峰(7:00-9:00)" checked>
                                        <input type="radio" name="period" value="1" title="晚高峰(17:00-19:00)">
                                        <input type="radio" name="period" value="2" title="全天(0:00-24:00)">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">优化目标</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="goal[0]" title="减少等待时间" checked>
                                        <input type="checkbox" name="goal[1]" title="提高通行效率">
                                        <input type="checkbox" name="goal[2]" title="降低拥堵指数">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="submit" class="layui-btn layui-btn-normal" lay-submit
                                            lay-filter="startAnalysis">
                                            <i class="layui-icon layui-icon-engine"></i> 开始分析
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                </div>

                <!-- 分析过程 -->
                <div class="analysis-step" id="analysisProcess" style="display: none;">
                    <fieldset class="layui-elem-field">
                        <legend>分析过程</legend>
                        <div class="layui-field-box">
                            <div class="layui-step layui-step-vertical">
                                <div class="layui-step-item layui-step-item-active">
                                    <div class="layui-step-item-head">
                                        <div class="layui-step-item-head-inner">1</div>
                                    </div>
                                    <div class="layui-step-item-main">
                                        <div class="layui-step-item-main-title">数据准备</div>
                                        <div class="layui-step-item-main-desc">正在准备分析所需数据...</div>
                                    </div>
                                </div>
                                <div class="layui-step-item">
                                    <div class="layui-step-item-head">
                                        <div class="layui-step-item-head-inner">2</div>
                                    </div>
                                    <div class="layui-step-item-main">
                                        <div class="layui-step-item-main-title">模型分析</div>
                                        <div class="layui-step-item-main-desc">AI模型正在分析数据...</div>
                                    </div>
                                </div>
                                <div class="layui-step-item">
                                    <div class="layui-step-item-head">
                                        <div class="layui-step-item-head-inner">3</div>
                                    </div>
                                    <div class="layui-step-item-main">
                                        <div class="layui-step-item-main-title">结果生成</div>
                                        <div class="layui-step-item-main-desc">正在生成优化决策方案...</div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                <div class="layui-progress-bar" lay-percent="0%"></div>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <!-- 分析结果 -->
                <div class="analysis-step result-card">
                    <fieldset class="layui-elem-field">
                        <legend>分析结果</legend>
                        <div class="layui-field-box">
                            <div class="layui-card">
                                <div class="layui-card-header">决策方案摘要</div>
                                <div class="layui-card-body">
                                    <p>根据AI分析结果，建议对解放路与中山路交叉口的信号配时进行以下优化：</p>
                                    <ul>
                                        <li>东向西直行相位时长增加15秒</li>
                                        <li>南北向左转相位时长减少10秒</li>
                                        <li>新增早晚高峰专用相位</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="layui-collapse">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">详细分析报告</h2>
                                    <div class="layui-colla-content">
                                        <div class="layui-card">
                                            <div class="layui-card-header">问题识别</div>
                                            <div class="layui-card-body">
                                                <p>通过数据分析发现以下主要问题：</p>
                                                <ol>
                                                    <li>早高峰时段东向西方向车辆等待时间过长</li>
                                                    <li>南北向左转车辆通行效率偏低</li>
                                                    <li>现有配时方案未能充分利用绿灯时间</li>
                                                </ol>
                                            </div>
                                        </div>

                                        <div class="layui-card">
                                            <div class="layui-card-header">建议措施</div>
                                            <div class="layui-card-body">
                                                <p>针对上述问题，提出以下优化建议：</p>
                                                <ol>
                                                    <li>调整信号配时，增加东向西直行相位时长</li>
                                                    <li>优化南北向左转相位，提高通行效率</li>
                                                    <li>设置早晚高峰专用相位，适应不同时段交通需求</li>
                                                </ol>
                                            </div>
                                        </div>

                                        <div class="layui-card">
                                            <div class="layui-card-header">预期效果</div>
                                            <div class="layui-card-body">
                                                <p>实施上述优化措施后，预计可达到以下效果：</p>
                                                <ol>
                                                    <li>路口整体通行效率提升15%</li>
                                                    <li>车辆平均等待时间减少20%</li>
                                                    <li>早晚高峰拥堵指数下降12%</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- <div style="margin-top: 20px;">
                                <button class="layui-btn layui-btn-primary">
                                    <i class="layui-icon layui-icon-download-circle"></i> 导出报告
                                </button>
                            </div> -->
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['element', 'form'], function () {
            var element = layui.element;
            var form = layui.form;

            // 开始分析按钮点击事件
            form.on('submit(startAnalysis)', function (data) {
                layer.msg('开始进行AI分析，请稍候...');

                // 显示分析过程区域
                document.getElementById('analysisProcess').style.display = 'block';

                // 重置进度条
                var progressElem = document.querySelector('.layui-progress-bar');
                progressElem.setAttribute('lay-percent', '0%');
                element.render('progress');

                // 模拟分析过程
                var progress = 0;
                var stepElements = document.querySelectorAll('.layui-step-item');

                var timer = setInterval(function() {
                    progress += Math.random() * 10;
                    if (progress >= 100) {
                        progress = 100;
                        clearInterval(timer);

                        // 更新步骤状态
                        stepElements.forEach(function(el, index) {
                            el.classList.remove('layui-step-item-active');
                            el.classList.add('layui-step-item-done');
                        });

                        // 显示分析结果
                        document.querySelector('.result-card').style.display = 'block';
                        layer.msg('AI分析完成', {icon: 1});
                    } else if (progress >= 66) {
                        // 更新步骤状态
                        stepElements.forEach(function(el, index) {
                            el.classList.remove('layui-step-item-active');
                        });
                        stepElements[0].classList.add('layui-step-item-done');
                        stepElements[1].classList.add('layui-step-item-done');
                        stepElements[2].classList.add('layui-step-item-active');
                    } else if (progress >= 33) {
                        // 更新步骤状态
                        stepElements.forEach(function(el, index) {
                            el.classList.remove('layui-step-item-active');
                        });
                        stepElements[0].classList.add('layui-step-item-done');
                        stepElements[1].classList.add('layui-step-item-active');
                    }

                    progressElem.setAttribute('lay-percent', progress + '%');
                    element.render('progress');
                }, 200);

                return false;
            });

            // 默认隐藏分析结果
            document.querySelector('.result-card').style.display = 'none';

            form.render();
        });
    </script>
</body>

</html>